<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="description" content="量表评估工具仪表盘，提供各类心理和健康评估量表工具，包括孤独症行为量表(ABC)、胃肠道症状评定量表(GSRS)等，帮助用户进行自我评估和健康管理。">
        <meta name="keywords" content="量表评估工具, 心理健康评估, 孤独症行为量表, 胃肠道症状评定量表, 健康自测工具, 心理测评">
        <meta name="custom-image" content="https://totemlife.cn/apps/public/scales-dashboard-cover.jpg">
        <script src="/apps/js/baidu-tongji-mtx.js"></script>
        <title>量表评估工具仪表盘</title>
        <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
        <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
        <style>
            /* 页面样式 */
            body {
                background-color: #f8f9fa;
                padding-bottom: 60px;
            }

            footer {
                position: fixed;
                bottom: 0;
                width: 100%;
                background-color: rgba(15, 76, 129, 0.8);
                color: white;
                padding: 10px 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }

            .scale-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                height: 100%;
            }

            .scale-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
            }

            .scale-icon {
                font-size: 2.5rem;
                margin-bottom: 1rem;
            }

            .badge-count {
                position: absolute;
                top: -5px;
                right: -5px;
                font-size: 0.7rem;
            }

            .nav-tabs .nav-link {
                border: none;
                color: #495057;
                font-weight: 500;
                padding: 0.75rem 1rem;
            }

            .nav-tabs .nav-link.active {
                color: #0d6efd;
                background-color: transparent;
                border-bottom: 3px solid #0d6efd;
            }

            .assessment-item {
                border-left: 4px solid #dee2e6;
                transition: background-color 0.2s ease;
            }

            .assessment-item:hover {
                background-color: rgba(13, 110, 253, 0.05);
            }

            .assessment-item.abc {
                border-left-color: #fd7e14;
            }

            .assessment-item.gsrs {
                border-left-color: #20c997;
            }

            /* 移动端优化 */
            @media (max-width: 576px) {
                /* 标题优化 */
                h1 {
                    font-size: 1.75rem;
                }

                h5 {
                    font-size: 1.1rem;
                }

                /* 卡片优化 */
                .scale-card {
                    margin-bottom: 1rem;
                }

                /* 导航标签优化 */
                .nav-tabs .nav-link {
                    padding: 0.5rem 0.75rem;
                    font-size: 0.9rem;
                }

                /* 列表项优化 */
                .assessment-item {
                    padding: 0.75rem !important;
                }

                .assessment-item .fs-5 {
                    font-size: 1rem !important;
                }

                .assessment-item .text-muted {
                    font-size: 0.8rem !important;
                }

                /* 管理员视图优化 */
                .admin-view .table {
                    font-size: 0.85rem;
                }

                .admin-view .table th,
                .admin-view .table td {
                    padding: 0.5rem;
                }
            }
        </style>
    </head>
    <body>
        {{!-- 量表评估工具仪表盘页面 --}}
        <div class="container mt-4 mb-5">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h1>量表评估工具</h1>
                        <a href="/apps/trial" class="btn btn-teal mt-2" style="background-color:#88b04b;color:white;" id="returnButton">
                            <i class="fas fa-home"></i> 返回首页
                        </a>
                    </div>

                    {{!-- 可用量表工具卡片 --}}
                    <h5 class="mb-3">可用量表工具</h5>
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-4">

                        {{!-- GSRS量表卡片 --}}
                        <div class="col">
                            <div class="card scale-card shadow-sm h-100">
                                <div class="card-body text-center p-4">
                                    <div class="scale-icon text-teal">
                                        <i class="fas fa-bolt"></i>
                                    </div>
                                    <h5 class="card-title">胃肠道症状评定量表(GSRS)</h5>
                                    <p class="card-text text-muted">评估胃肠道症状的严重程度，包括反流、腹泻、便秘、消化不良和恶心呕吐等症状</p>
                                    <div class="position-relative d-inline-block">
                                        <a href="/apps/scales/gsrs-scale" class="btn btn-teal mt-2" style="background-color: #20c997; color: white;">开始评估</a>
                                        {{#if gsrsCount}}
                                        <span class="position-absolute badge bg-danger rounded-pill badge-count">{{gsrsCount}}</span>
                                        {{/if}}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{!-- ABC量表卡片 --}}
                        <div class="col">
                            <div class="card scale-card shadow-sm h-100">
                                <div class="card-body text-center p-4">
                                    <div class="scale-icon text-warning">
                                        <i class="fas fa-child"></i>
                                    </div>
                                    <h5 class="card-title">孤独症行为量表(ABC)</h5>
                                    <p class="card-text text-muted">评估儿童在感觉、交往、身体和目标物的使用、语言以及自理能力和社会适应等方面的表现</p>
                                    <div class="position-relative d-inline-block">
                                        <a href="/apps/scales/abc-scale" class="btn btn-warning mt-2">开始评估</a>
                                        {{#if abcCount}}
                                        <span class="position-absolute badge bg-danger rounded-pill badge-count">{{abcCount}}</span>
                                        {{/if}}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{!-- 克氏量表卡片 --}}
                        <div class="col">
                            <div class="card scale-card shadow-sm h-100">
                                <div class="card-body text-center p-4">
                                    <div class="scale-icon text-primary">
                                        <i class="fas fa-puzzle-piece"></i>
                                    </div>
                                    <h5 class="card-title">克氏孤独症行为量表(CABS)</h5>
                                    <p class="card-text text-muted">通过14个行为项目评估儿童的孤独症特征，简便易用的孤独症筛查工具</p>
                                    <div class="position-relative d-inline-block">
                                        <a href="/apps/scales/cabs-scale" class="btn btn-primary mt-2">开始评估</a>
                                        {{#if cabsCount}}
                                        <span class="position-absolute badge bg-danger rounded-pill badge-count">{{cabsCount}}</span>
                                        {{/if}}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{!-- 更多量表卡片可以在这里添加 --}}
                    </div>

                    {{!-- 评估结果标签页 --}}
                    <div class="card shadow-sm">
                        <div class="card-header bg-light p-0">
                            <ul class="nav nav-tabs" id="resultTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="my-results-tab" data-bs-toggle="tab" data-bs-target="#my-results" type="button" role="tab" aria-controls="my-results" aria-selected="true">
                                        <i class="fas fa-user me-2"></i>我的评估结果
                                    </button>
                                </li>
                                {{#if isAdmin}}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="all-results-tab" data-bs-toggle="tab" data-bs-target="#all-results" type="button" role="tab" aria-controls="all-results" aria-selected="false">
                                        <i class="fas fa-users me-2"></i>所有用户评估结果
                                    </button>
                                </li>
                                {{/if}}
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="resultTabsContent">
                                {{!-- 我的评估结果标签内容 --}}
                                <div class="tab-pane fade show active" id="my-results" role="tabpanel" aria-labelledby="my-results-tab">
                                    {{#if myAssessments.length}}
                                        <div class="list-group">
                                            {{#each myAssessments}}
                                            <a href="/apps/scales/{{#if (eq scale_type 'abc')}}abc-scale/result/{{id}}{{else}}gsrs-scale/result/{{id}}{{/if}}" class="list-group-item list-group-item-action assessment-item {{scale_type}} p-3">
                                                <div class="d-flex w-100 justify-content-between align-items-center">
                                                    <div>
                                                        <div class="fs-5 mb-1">
                                                            {{#if (eq scale_type 'abc')}}
                                                            <i class="fas fa-child text-warning me-2"></i>孤独症行为评定量表(ABC)
                                                            {{/if}}
                                                            {{#if (eq scale_type 'cabs')}}
                                                            <i class="fas fa-child text-warning me-2"></i>克氏孤独症行为量表(CABS)
                                                            {{/if}}
                                                            {{#if (eq scale_type 'gsrs')}}
                                                            <i class="fas fa-stomach text-teal me-2"></i>胃肠道症状评定量表(GSRS)
                                                            {{/if}}
                                                        </div>
                                                        <div class="text-muted">
                                                            {{#if (eq scale_type 'gsrs')}}
                                                            <span>评估人: {{../userInfo.real_name}}</span>
                                                            {{else}}
                                                            <span>姓名: {{child_name}} | 年龄: {{child_age}}岁 | 性别: {{child_gender}}</span>
                                                            {{/if}}
                                                        </div>
                                                    </div>
                                                    <div class="text-end">
                                                        <div>
                                                            <span class="badge {{#if (eq scale_type 'abc')}}{{#if (eq result_level '正常')}}bg-success{{else if (eq result_level '轻度')}}bg-warning{{else if (eq result_level '中度')}}bg-orange{{else}}bg-danger{{/if}}{{else}}{{#if (eq result_level '轻微')}}bg-success{{else if (eq result_level '中度')}}bg-warning{{else if (eq result_level '较重')}}bg-orange{{else}}bg-danger{{/if}}{{/if}} px-2">
                                                                {{result_level}}
                                                            </span>
                                                        </div>
                                                        <small class="text-muted">{{formatDate assessment_date "YYYY-MM-DD HH:mm"}}</small>
                                                    </div>
                                                </div>
                                            </a>
                                            {{/each}}
                                        </div>
                                    {{else}}
                                        <div class="text-center py-5">
                                            <div class="mb-3">
                                                <i class="fas fa-clipboard-list text-muted" style="font-size: 3rem;"></i>
                                            </div>
                                            <h5 class="text-muted">您还没有完成任何量表评估</h5>
                                            <p class="text-muted">请选择上方的量表工具开始您的评估</p>
                                        </div>
                                    {{/if}}
                                </div>

                                {{!-- 所有用户评估结果标签内容（仅管理员可见） --}}
                                {{#if isAdmin}}
                                <div class="tab-pane fade admin-view" id="all-results" role="tabpanel" aria-labelledby="all-results-tab">
                                    <div class="mb-3">
                                        <div class="input-group">
                                            <input type="text" id="searchInput" class="form-control" placeholder="搜索用户名、姓名或评估类型...">
                                            <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="table-responsive">
                                        <table class="table table-hover" id="allResultsTable">
                                            <thead>
                                                <tr>
                                                    <th>用户</th>
                                                    <th>量表类型</th>
                                                    <th>评估对象</th>
                                                    <th>评估结果</th>
                                                    <th>评估时间</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{#each allAssessments}}
                                                <tr>
                                                    <td>{{user_name}}</td>
                                                    <td>
                                                        {{#if (eq scale_type 'cabs')}}
                                                        <span class="badge bg-warning">CABS量表</span>
                                                        {{/if}}
                                                        {{#if (eq scale_type 'abc')}}
                                                        <span class="badge bg-warning">ABC量表</span>
                                                        {{/if}}
                                                        {{#if (eq scale_type 'gsrs')}}
                                                        <span class="badge bg-warning">GSRS量表</span>
                                                        {{/if}}
                                                    </td>
                                                    <td>
                                                        {{#if (eq scale_type 'gsrs')}}
                                                        {{user_name}}
                                                        {{else}}
                                                        {{child_name}}
                                                        {{/if}}
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-primary">
                                                            {{result_level}}
                                                        </span>
                                                    </td>
                                                    <td>{{formatDate assessment_date "YYYY-MM-DD HH:mm"}}</td>
                                                    <td>
                                                        <a href="/apps/scales/{{scale_type}}-scale/result/{{id}}" class="btn btn-sm btn-outline-primary">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                {{/each}}
                                            </tbody>
                                        </table>
                                    </div>

                                    {{#unless allAssessments.length}}
                                    <div class="text-center py-5">
                                        <div class="mb-3">
                                            <i class="fas fa-users text-muted" style="font-size: 3rem;"></i>
                                        </div>
                                        <h5 class="text-muted">暂无用户评估数据</h5>
                                    </div>
                                    {{/unless}}
                                </div>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 海报模态框 -->
        <div class="modal fade" id="posterModal" tabindex="-1" aria-labelledby="posterModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="posterModalLabel">评估结果海报</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <div class="spinner-border text-primary mb-3" role="status" id="posterLoading">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <div id="posterContainer" style="display: none;">
                            <img id="posterImage" src="" alt="评估结果海报" class="img-fluid mb-3">
                            <p class="text-muted">长按图片保存或分享给好友</p>
                        </div>
                        <div id="posterError" class="alert alert-danger" style="display: none;">
                            生成海报失败，请稍后重试。
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer>
            <div class="text-center">
                <a id="tmall-app-home-link" href="weixin://dl/business/?appid=wx1b441d1a37b278e1&path=pages/index/index&env_version=release" class="text-decoration-none">
                    <span id="tmall-app-home-title" style="color: white; font-size: 16px; margin-left: 5px;">
                        <i class="fa fa-house"></i> 广州图腾生命医学研究有限公司
                    <span>
                </a>
                &copy;{{currentYear}} <a href="/apps/clear"><i class="fa fa-minus fa-xs" style="color:white"></i>
                </a>
            </div>
        </footer>

        <!-- 将所有JS文件移到这里，并添加defer属性 -->
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
        <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
        <script src="/apps/js/wx-client-dom.js" defer></script>
        <script src="/apps/js/chart.js" defer></script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 处理返回按钮 - 检测URL参数
                const urlParams = new URLSearchParams(window.location.search);
                const returnUrl = urlParams.get('returnUrl');
                const returnLabel = urlParams.get('returnLabel');

                if (returnUrl && returnLabel) {
                    const returnButton = document.getElementById('returnButton');
                    if (returnButton) {
                        returnButton.href = returnUrl;
                        returnButton.innerHTML = `<i class="fas fa-arrow-left"></i> ${returnLabel}`;
                    }
                }

                // 搜索功能
                const searchInput = document.getElementById('searchInput');
                const searchButton = document.getElementById('searchButton');
                const table = document.getElementById('allResultsTable');

                if (searchInput && searchButton && table) {
                    const searchTable = function() {
                        const filter = searchInput.value.toUpperCase();
                        const rows = table.getElementsByTagName('tr');

                        for (let i = 1; i < rows.length; i++) {
                            let found = false;
                            const cells = rows[i].getElementsByTagName('td');

                            for (let j = 0; j < cells.length; j++) {
                                const cellText = cells[j].textContent || cells[j].innerText;

                                if (cellText.toUpperCase().indexOf(filter) > -1) {
                                    found = true;
                                    break;
                                }
                            }

                            rows[i].style.display = found ? '' : 'none';
                        }
                    };

                    searchButton.addEventListener('click', searchTable);
                    searchInput.addEventListener('keyup', function(event) {
                        if (event.key === 'Enter') {
                            searchTable();
                        }
                    });
                }

                // 生成海报功能
                const posterModal = new bootstrap.Modal(document.getElementById('posterModal'));
                const posterLoading = document.getElementById('posterLoading');
                const posterContainer = document.getElementById('posterContainer');
                const posterImage = document.getElementById('posterImage');
                const posterError = document.getElementById('posterError');

                // 微信分享配置
                if (typeof wx !== 'undefined' && wx.ready) {
                    wx.ready(function() {
                        // 配置分享到朋友圈
                        wx.onMenuShareTimeline({
                            title: '量表评估工具 - 提供各类心理和健康评估量表',
                            link: window.location.href,
                            imgUrl: 'https://totemlife.cn/apps/public/scales-dashboard-cover.jpg',
                            success: function() {
                                console.log('分享成功');
                            }
                        });

                        // 配置分享给朋友
                        wx.onMenuShareAppMessage({
                            title: '量表评估工具',
                            desc: '提供各类心理和健康评估量表工具，包括孤独症行为量表(ABC)、胃肠道症状评定量表(GSRS)等',
                            link: window.location.href,
                            imgUrl: 'https://totemlife.cn/apps/public/scales-dashboard-cover.jpg',
                            success: function() {
                                console.log('分享成功');
                            }
                        });
                    });
                }
            });
        </script>
    </body>
</html> 
